<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="include::header"></head>
<style>
    .red{font-weight: bold;color: #FF5722}

    .myRadios {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
        width: 100%;
    }

    .layui-icon-radio,.layui-icon-circle{
        display: none!important;
    }
    .layui-form-radio {
        margin: 0px!important;
        padding: 0px!important;
    }
    .layui-form-radio>div{
        height: 40px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .layui-form-radio:first-of-type div{
        border-radius: 10px 0px 0px 10px;
    }
    .layui-form-radio:last-of-type div{
        border-radius: 0px 10px 10px 0px;
    }
    .layui-form-radioed div{
        background-color: #409eff;
        color: #fff!important;
    }
    .layui-form-radio:hover>*, .layui-form-radioed, .layui-form-radioed>i {
        color: #409eff;
    }
    .col-sm-6{
        height: 400px;
        padding: 40px;
    }
    td>a,td>a:hover{
        color: #409eff;
    }
</style>
<body  >
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <p>欢迎您： <span th:text="${name}" style="font-size: 22px"></span>
        </p>
    </div>

</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="layui-form myRadios">
                <input id="myRadio" value="1" style="display: none">
                <input type="radio"  name="month" value="1" title="今日" lay-filter="demo-radio-filter" checked>
                <input type="radio" name="month" value="2" title="本月" lay-filter="demo-radio-filter" >
            </div>
        </div>
        <div class="col-sm-6" id="one">

        </div>
        <div class="col-sm-6" id="two">

        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>待办任务</h5>
                </div>
                <table id="templet" class="layui-table">
                    <thead>
                        <tr>
                            <th>任务名称</th>
                            <th>待审核数量</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>月嫂入驻审核</td>
                            <td id="auntSum"></td>
                            <td><a id="audit" class="" onclick="skipHtml('/userAunt/jazUserAuntExamine/')">去审核</a></td>
                        </tr>
                        <tr>
                            <td>用户需求审核</td>
                            <td id="userSum"></td>
                            <td><a id="audit2" onclick="skipHtml('/jzweb/jazUserDemand')">去审核</a></td>
                        </tr>
                        <tr>
                            <td>阿姨预约住宿审核</td>
                            <td id="anSum"></td>
                            <td><a id="audit3" onclick="skipHtml('/userAunt/jazUserAuntStay')">去审核</a></td>
                        </tr>
                    </tbody>

                </table>

            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script>
    var myChart1,myChart2;
    function skipHtml(value) {
        let baseUrl = window.location.origin
        const menu = window.parent.$('.J_menuItem');//父页面的方法
        for (let i = 0; i < menu.length; i++) {
            if (menu[i].href === `${baseUrl}${value}`) {
                menu[i].click()
            }
        }
    }
    const setOption=(data,fastTitle='',title='',lasTtitle='')=>{
        let Sums=0
        data.forEach(item=>{Sums+=Number(item.value)})
       return  {
            tooltip: {
                trigger: 'item',
                formatter: function(data){
                    return`<span style='font-size: 14px;'>${data.name}</span> <br/>
                        ${data.marker} ${title}   ${data.data.value} ，占比${data.percent}%
                            <br/>`;

                }
            },
            title: {
                text: `${title} ：${fastTitle} ${Sums} ${lasTtitle}`
            },
            legend: {
                bottom: '1%',
                left: 'center',
            },
            series: [
                {
                    name: '${title}',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    padAngle: 1,
                    data:data,
                    label: {
                        formatter: '{b}\n{d}%',
                        rich: {
                            time: {
                                fontSize: 10,
                                color: '#999'
                            }
                        }
                    },
                }
            ]
        };
    }
    const setData=(myType)=>{
        showLoading()
        $.ajax({
            url:'/home/getOrderRecharge',
            data:{
                type:myType
            },
            type:'POST',
            success:function (r) {
                if (r.code == 0){
                    myChart1.setOption(setOption( [
                        { value: r.data.otherNum, name: '其他' },
                        { value: r.data.auntNum, name: '阿姨' },
                        { value: r.data.userNum, name: '用户' },
                    ],'',(myType==1?'今日':'本月')+'新增人数','人'));
                    myChart2.setOption(setOption( [
                        { value: r.data.commodityIncome, name: '商品'  },
                        { value: r.data.groupIncome, name: '团购'  },
                        { value: r.data.courseIncome, name: '课程' },
                    ],'￥',(myType==1?'今日':'本月')+'总收入',''));
                    $('#auntSum').html(r.data.auntSum)
                    $('#userSum').html(r.data.userSum)
                    $('#anSum').html(r.data.houseSum)
                }
                hindLoading()
            },error:function(){  hindLoading()}
        })
    }
    $(function () {
         myChart1 = echarts.init(document.getElementById("one"));
         myChart2 = echarts.init(document.getElementById("two"));

        layui.use(function(){
            var form = layui.form;
            form.on('radio(demo-radio-filter)', function(data){
                setData(data.elem.value)
            });
        });
        setData(1)
    })
    window.onresize=()=>{
        myChart1?.resize()
        myChart2?.resize()
    }

</script>
</body>

</html>
